<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('系统管理员操作界面')"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: jasny-bootstrap-css" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<style type="text/css">
    .table {
        table-layout: fixed;
    }</style>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="operlog-form">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>操作时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" id="search_btn"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-info" onclick="MyPreview()" id="print">
                <i class="fa fa-remove"></i> 打印维护记录
            </a>
            <a class="btn btn-info" onclick="checkItem()" id="select">
                <i class="fa fa-remove"></i> 选中项
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>

        <div class="col-sm-12 select-table table-striped" id="divid_sbtz" style="display: none">
            <table  class='table table-hover table-bordered' cellpadding='0' border='1' cellspacing='0' id="tableid_sbtz">
                <thead><div><p>计算机设施设备管理台帐</p></div>
                <tr style="font-size: 9pt;font-family: 微软雅黑;">
                    <td align="center" style="background-color: #99CCFF">序号</td>
                    <td align="center" style="background-color: #99CCFF">设备编号</td>
                    <td align="center" style="background-color: #99CCFF">设备名称</td>
                    <td align="center" style="background-color: #99CCFF">主板</td>
                    <td align="center" style="background-color: #99CCFF">CPU</td>
                    <td align="center" style="background-color: #99CCFF">内存</td>
                    <td align="center" style="background-color: #99CCFF">硬盘</td>
                    <td align="center" style="background-color: #99CCFF">显示器</td>
                </tr>
                </thead>
                <tbody id="tbody_id">
                </tbody>
            </table>
        </div>

    </div>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: jasny-bootstrap-js" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
    var selections = [];
    var LODOP; //声明为全局变量
    var now = getNow();
    watermark({"watermark_txt": "A B C X Y Z " + now});
    $(document).ready(function () {
        initUserTable();
        function initUserTable() {
            $("#bootstrap-table").bootstrapTable({
                toolbar: '#toolbar',
                showToggle: true,//是否切换显示
                showColumns: true,//是否显示列，
                showColumnsToggleAll: true,
                detailView: true,//和下面的属性成对设置，是否显示加号显示详细信息
                detailFormatter: "detailFormatter",
                showExport: true,//是否导出
                // showPaginationSwitch: true,//切换是否分页显示
                showFooter: true,//是否显示页脚，主要用途是显示汇总的信息
                striped: false,//是否显示行间隔色
                paginationPreText: '上一页',
                paginationNextText: '下一页',
                queryParamsType: '',
                method: 'GET',
                uniqueId: "id",
                exportDataType: "basic", //basic', 'all', 'selected'.
                // exportTypes:['Excel'],  //导出文件类型
                pageNumber: 1,
                pagination: true,//是否分页
                sidePagination: 'server',//server:服务器端分页|client：前端分页
                pageSize: 10,//单页记录数
                pageList: [10, 20, 30, 'ALL'],//可选择单页记录数
                showRefresh: true,//刷新按钮
                queryParams: queryParams,
                // onDblClickRow: function (row,index) {
                //     console.log(index[0])
                // },
                onDblClickRow:function(row,tr,flied){
                    tr.addClass("selected")
                    alert(row.id)
                    tr.attr("checked",true)
                },

                url: "/nc/sbwhb/getsbwhbywhrq",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'no',
                        title: '序号',
                        align: "center",
                        width: 60,
                        formatter: function (value, row, index) {
                            //获取每页显示的数量
                            var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                            //获取当前是第几页
                            var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                            //返回序号，注意index是从0开始的，所以要加上1
                            return pageSize * (pageNumber - 1) + index + 1;}
                    },
                    {
                        field: 'sbbh',
                        title: '设备编号',
                        // sortable: true,
                    },
                    {
                        field: 'whrq',
                        title: '维护日期'
                    },
                    {
                        field: 'bmid',
                        title: '部门名称'
                    },
                    {
                        field: 'gzyy',
                        title: '故障原因'
                    },
                    {
                        field: 'jjfa',
                        title: '解决方案'
                    },
                    {
                        field: 'weihr',
                        title: '维护人'
                    },
                    {
                        field: 'shiyr',
                        title: '设备使用人'
                    }]
            })
        }
    });
    //查询按钮事件
    $('#search_btn').click(function () {
        $('#bootstrap-table').bootstrapTable('refresh', {
            url: '/nc/sbwhb/getsbwhbywhrq',
        });
    });

    function getIdSelections() {
        return $.map($('#bootstrap-table').bootstrapTable('getSelections'), function (row) {
            return row.id
        })
    }

    function queryParams(params) {
        var param = {
            limit: params.limit, // 页面大小
            offset: params.offset, // 页码
            nextPage: params.pageNumber,
            pageNumber: params.pageNumber,
            pageSize: params.pageSize,
            // sbbh: $("#sbbh").val(),
            startTime:$("#startTime").val(),
            endTime:$("#endTime").val(),
        };
        return param;
    }

    function MyPreview() {
        var column = $('#bootstrap-table').bootstrapTable('getSelections');
        var options = "";
        // var iCurLine = 20;
        var j=0;
        for (var i = 0; i < column.length; i++) {  //遍历json数组
            j=parseInt(i)+1;
            options +="<tr style='font-family: 微软雅黑;font-size: 9pt;height: 30px'>"
                + "<td align='center'>"+j+"</td>"
                + "<td align='center'>"+column[i].sbbh+"</td>"
                + "<td align='center'>"+column[i].whrq+"</td>"
                + "<td align='center'>"+column[i].bmid+"</td>"
                + "<td align='center'>"+column[i].gzyy+"</td>"
                + "<td align='center'>"+column[i].jjfa+"</td>"
                + "<td align='center'>"+column[i].weihr+"</td>"
                + "<td align='center'>"+column[i].shiyr+"</td>"
                + "</tr>";
        }
        $('#tableid_sbtz').append(options);
        Mysbtz();
    };

    function Mysbtz() {
        var options = $('#divid_sbtz').html();
        LODOP = getLodop();
        LODOP.PRINT_INIT("");
        LODOP.ADD_PRINT_TABLE(5, 5, 2970, 2100, options);
        LODOP.PREVIEW();
    };

    // 选中数据
    function checkItem(){
        return $.map($('#bootstrap-table').bootstrapTable('getSelections'), function (row) {
            var arrays = row.selectColumns(id)
            alert(arrays);
        })
    }
</script>
</body>
</html>